// import { useChatStore } from '@/components/Chat/chatStore'
import { showMessage } from '@/components/antd-comp/message'
import { useAssistantStore } from '@/store/assistantStore'
import { Button, Input } from 'antd'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import '../css/styles.css'
import CallWordDia from './CallWordDia'
import OptionDia from './OptionDia'
const { TextArea } = Input
export default function Prompt({ propsRef }) {
  const { t } = useTranslation()

  const [open, setOpen] = useState(false)
  const [callOpen, setCallOpen] = useState(false)

  const { assistantState, dispatchAssistant } = useAssistantStore()

  // const { setPromptRound } = useChatStore()

  function assisTemBtn() {
    setOpen(true)
  }
  /* 提交 */
  const submitData = data => {
    dispatchAssistant('setDesc', { prompt: data })
    setOpen(false)
  }
  /* placeholder显示 */
  const [showPlaceholder, setShowPlaceholder] = useState(true)
  /* 添加 */
  const addCallWord = (e: any) => {
    dispatchAssistant('setDesc', { prompt: e.content ? e.content : '' })
    showMessage({
      content: '添加成功',
      type: 'success'
    })
    setCallOpen(false)
  }

  return (
    <div className="prompt_callsetting_applicationBtn_case w-[50%] overflow-y-auto bg-[#fff] shadow-sm scrollbar-hide">
      <div ref={propsRef} className="h-full">
        <div className="flex-between-center">
          <span className="applicationEditPage_rule_setting_title">角色设定</span>
          <div
            className="flexRowStart cursonCase applicationEditPage_callWord_setting_name"
            onClick={() => {
              setCallOpen(true)
            }}
          >
            <svg
              className="mr-[4px]"
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clipPath="url(#clip0_315_3896)">
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M11.5223 0.792742L11.5 0.5L11.4777 0.792742C11.3278 2.76248 9.76248 4.32785 7.79274 4.47773L7.5 4.5L7.79274 4.52227C9.76248 4.67215 11.3278 6.23752 11.4777 8.20726L11.5 8.5L11.5223 8.20726C11.6722 6.23752 13.2375 4.67215 15.2073 4.52227L15.5 4.5L15.2073 4.47773C13.2375 4.32785 11.6722 2.76248 11.5223 0.792742ZM2.25 4.5C2.25 3.80964 2.80964 3.25 3.5 3.25H5.19231C5.60652 3.25 5.94231 2.91421 5.94231 2.5C5.94231 2.08579 5.60652 1.75 5.19231 1.75H3.5C1.98122 1.75 0.75 2.98122 0.75 4.5V12.5C0.75 14.0188 1.98122 15.25 3.5 15.25H11.5C13.0188 15.25 14.25 14.0188 14.25 12.5V10.8077C14.25 10.3935 13.9142 10.0577 13.5 10.0577C13.0858 10.0577 12.75 10.3935 12.75 10.8077V12.5C12.75 13.1904 12.1904 13.75 11.5 13.75H3.5C2.80964 13.75 2.25 13.1904 2.25 12.5V4.5Z"
                  fill="url(#paint0_linear_315_3896)"
                />
              </g>
              <defs>
                <linearGradient
                  id="paint0_linear_315_3896"
                  x1="0.75"
                  y1="7.875"
                  x2="15.5"
                  y2="7.875"
                  gradientUnits="userSpaceOnUse"
                >
                  <stop stopColor="#3B74FB" />
                  <stop offset="0.505" stopColor="#6468F7" />
                  <stop offset="1" stopColor="#9659F2" />
                </linearGradient>
                <clipPath id="clip0_315_3896">
                  <rect width="16" height="16" fill="white" />
                </clipPath>
              </defs>
            </svg>
            导入提示词
          </div>
        </div>
        <div className="my-textarea">
          {showPlaceholder && !assistantState.prompt && (
            <div className="placeholder-text h-[98%]">
              详细、具体地描述助手与用户的交互方式，例如助手的身份、完成任务的具体方法和步骤、回答问题时的语气及应该注意什么问题等
              <br></br>
              <br></br>
              你也可以按照以下模板配置角色信息
              <br></br>
              <br></br>
              角色
              <br></br>
              你是一个[助手的角色]，[助手的角色描述]。
              <br></br>
              <br></br>
              技能
              <br></br>
              [技能 1 的描述]：
              <br></br>
              [技能 1 的具体内容]。
              <br></br>
              [技能 1 的具体内容]。
              <br></br>
              <br></br>
              限制
              <br></br>
              [限制 1 的描述]。
              <br></br>
              [限制 2 的描述]。
            </div>
          )}

          <TextArea
            className="TextArea_applic h-[98%] bg-transparent scrollbar-hide focus-visible:ring-0"
            value={assistantState.prompt}
            onInput={e => {
              // @ts-expect-error 忽略此处类型检查
              dispatchAssistant('setDesc', { prompt: e?.target?.value })
              setShowPlaceholder(false)
            }}
            onBlur={() => {
              // 当文本区域失去焦点时，检查其内容是否为空
              if (!assistantState.prompt) {
                setShowPlaceholder(true)
              }
            }}
          />
        </div>
        {/* <div className="prompt_callsetting_applicationBtn">
          <Button
            className="callOptimizeBtn_footer"
            onClick={() => {
              assisTemBtn()
            }}
          >
            {t('call.callOptimizeBtn')}
          </Button>
        </div> */}
      </div>
      {open ? (
        <OptionDia
          submitData={submitData}
          open={open}
          setOpen={setOpen}
          obj={{ content: assistantState.prompt }}
        ></OptionDia>
      ) : null}
      {/* 提示词弹窗 */}
      {callOpen && <CallWordDia addCallWord={addCallWord} open={callOpen} setOpen={setCallOpen}></CallWordDia>}
    </div>
  )
}
